{% extends 'main.html' %}
{% block content %}
    {% load staticfiles %}
    		<style>
			.label_span a{
				padding: 5px;
				margin: 5px;
				border: 1px solid #E5E5E5;
				color: #666666;
				float: left;
			}
			.label_span a:hover{
				text-decoration: none;
				color: #2EE679;
				border: 1px solid #2EE679;
			}
/*			.label_span a:focus{
				text-decoration: none;
				color: #2EE679;
				border: 1px solid #2EE679;
			}*/
			.introduce p{
				margin: 15px 0;
			}
			.introduce span{
				padding: 5px;
				margin: 5px;
				border-radius: 2px;
			}
			#download a{
				color: #FFFFFF;
			}
			#download a:hover{
				text-decoration: none;
			}
			#download a:focus{
				text-decoration: none;
			}
		</style>

		<div class="container " style="border: 1px solid #ececec;margin-top: 20px;">
			<div class="row" style="margin-bottom: 10px;">
				<div class="col-md-9 col-sm-12 col-xs-12" style="vertical-align: middle;text-align: center;">
					<h1 style="text-align: left;">{{ name }}</h1>
					<div id="tupian" style="max-height: 600px;max-width: 846px; border: 1px solid #E5E5E5;">
                        <img src="{{ path }}" alt="" style="max-width:846px;max-height:600px">
					</div>
				</div>
				<div class="col-md-3 col-sm-12 col-xs-12" style="margin-top: 68px;">
					<h4>{{ name }}</h4>
					<div class="col-md-12 col-sm-12 col-xs-12" style="padding: 0px;">
						<p><span style="color: #2EE679;">{{ username }}</span>於<span style="color: #2EE679;">{{ time|date:"Y-m-d H:i:s"}}</span>上傳</p>
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12">
                        <button class="btn btn-success btn-lg" id="download" style="background: #2EE679;border: none;font-size: 26px;">
                            <a href="{{ download_path }}">
                            <span style="position: absolute; top: 9px;">
                                <img src="/static/img/downloda_cloud.png" style="width: 30px;"/>
                            </span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下載</a>
                        </button>
					</div>
					<div class="col-md-12 col-sm-12 col-xs-12 introduce" style="padding: 0px;">
						<p>尺寸：<span>{{ size }}px</span></p>
						<p>格式：<span style="background: #2EE679;color: #FFFFFF;">{{ pattern }}</span></p>
						<p>體積：<span style="border: 1px solid #2EE679; color: #2EE679;">{{ img_size }}</span></p>
					</div>
					<div class="label_span col-md-12 col-sm-12 xol-xs-12" style="height: auto; width: 100%;padding: 0px;">
						<h5>您可能感興趣：</h5>
						<div>
							<a href="index.html" target="_blank">柯南</a>
							<a href="index.html" target="_blank">名偵探</a>
							<a href="#">動漫</a>
							<a href="#">白色</a>
							<a href="#">服部平次</a>
							<a href="#">工藤新一</a>
							<a href="index.html" target="_blank">毛利蘭</a>
							<a href="#">魔術師</a>
							<a href="#">遠山和葉</a>
							<a href="#">怪盜基德</a>
							<a href="#">灰原哀</a>
							<a href="#">JPEG</a>
						</div>

					</div>
				</div>
			</div>
		</div>
{% endblock %}